<template>
    <div class="btn" :class="checked?' checkBtn':''">
        <slot></slot>
    </div>
    </template>
    <script setup>
    import { defineProps } from 'vue';
    defineProps({
        checked:{
            type:Boolean,
            default:false
        }
    })
    </script>
    <style scoped>
    .btn{
        display: inline-block;
        padding: 5px 20px;
        background-image: url("/pubic/mo.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-size: 10px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        color: #1879ae;
    }
    .btn:hover{
        display: inline-block;
        padding: 5px 20px;
        background-image: url("/public/xuan.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }
    
    .checkBtn{
        background-image: url("/public/xuan.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }
    </style>